<template>
  <!--  所有的类别-->
  <div>
    <div class="periphery shadow" :style="'background-color:'+theme.secondaryBackground">
      <!--    分类的数量-->
      <div :style="'color:'+theme.numberOneTextColor">
        <p>
          当前一共有 <span class="h1" style="font-size: 30px">{{num}}</span> 个类别
        </p>
      </div>
      <!--    详细的分类-->
      <div style="margin-top: 100px" :style="'color:'+theme.numberOneTextColor">

        <ul v-for="(item,index) in classification_list" :key="index"
            :style="'color:'+theme.numberOneTextColor">
          <li>
            <router-link :style="'color:'+theme.numberOneTextColor"
                         :to="{path:'/classifiedArticles',query:{cid:item.id}}"
                         class="article_item">+ {{item.level_1}} (10)
            </router-link>
            <ul style="margin-left: 5%">
              <li :style="'color:'+theme.numberOneTextColor"
                  v-for="(level_2,index1) in item.level_2" class="text" :key="index1">
                <router-link :to="{path:'/classifiedArticles',query:{cid:level_2.id}}"
                             class="article_item">- {{level_2.level_1}} (10)
                </router-link>
              </li>
            </ul>
          </li>
        </ul>

      </div>
    </div>

    <comment :comment_list=this.comment_list :aid=this.aid></comment>
  </div>
</template>

<script>
  import comment from '@/components/comment';

  export default {
    components: { comment },
    data() {
      return {
        aid: 0,
        num: 0,
        comment_list: [],
        classification_list: [],
      };
    },
    created() {
      const that = this;


      // 初始化系统
      that.theme = that.$store.getters.getTheme;

       that.$http.get(`${that.CLASSIFICATION_API}/all_categories`).then((res) => {
        console.log(JSON.stringify(res.data));
        that.classification_list = res.data.result;
      });
      //  获取文章的评论列表
      that.$http.get(`${that.COMMENT_API}/all_reviews/${that.aid}`)
        .then((res) => {
          that.comment_list = res.data.result;
        });
      //  获取分类的数量
      that.$http.get(`${that.CLASSIFICATION_API}/number_of_categories`).then((res) => {
        that.num = res.data;
      });
    },
    methods: {
      // 这种跳转方式暂时废弃了
      // 当前时间:2020年02月27日00:24:48
      bigClassification(e) {
        console.log(e);
        const that = this;
        that.$router.push({
          name: '/classificationOfTheArticle',
          params: {
            aid: e,
          },
        });
      },
    },
  };
</script>

<style>

  .article_item:hover {
    color: #000000;
  }

  .article_item {
    padding-top: 20px;
    font-size: 16px;
    color: #5f636c
  }

  ul li {
    margin-top: 1em;
  }

  .periphery {

    height: 100%;
    margin-top: 0;
    padding: 3%;
  }

  .text {
    font-size: 14px;
  }


</style>
